<template>
  <div class="props-table">
    <div v-for="(value, key) in finalProps" :key="key" class="prop-item">
      <span class="label" v-if="value.text">{{value?.text}}</span>
      <component
        v-if="value"
        :is="value.component"
        :value="value.value"
        v-bind="value.extraProps"
      >
        <template v-if="value.options">
          <component
            :is="value.subComponent"
            v-for="(option, k) in value.options"
            :key="k"
            :value="option.value"
          >
            {{ option.text }}
          </component>
        </template>
      </component>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, PropType } from "vue";
import { reduce } from "lodash-es";
import { TextComponentProps } from "./defaultProps";
import { mapPropsToForms, PropsToForms } from "./propMaps";

defineOptions({
  name: "PropsTable",
});
const props = defineProps({
  props: {
    type: Object as PropType<TextComponentProps>,
  },
});

const finalProps = computed(() => {
  return reduce(
    props.props,
    (result, value, key) => {
      const newKey = key as keyof TextComponentProps;
      const item = mapPropsToForms[newKey];
      if (item) {
        item.value = value;
        result[newKey] = item;
      }
      return result;
    },
    {} as PropsToForms
  );
});
</script>
<style lang="less" scoped></style>
